﻿
@{
    ViewBag.Title = "CourseSetting";
}
<style>
    tr td {
        text-align: center !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
</style>
<div class="title-content">课程设置</div>
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet light ">
            <div class="portlet-body">
                <div class="table-toolbar">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="btn-group">
                                <a class="btn sbold green ase" href="" data-toggle="modal" onclick="getDatas('last'); getColor(this)">上周</a>
                            </div>
                            <div class="btn-group">
                                <a class="btn sbold red ase" href="" onclick="getDatas('this'); getColor(this)" data-toggle="modal">本周</a>
                            </div>
                            <div class="btn-group">
                                <a class="btn sbold green ase" href="" id="nexts" onclick="getDatas('next'); getColor(this)" data-toggle="modal">下周</a>
                            </div>
                            <div class="btn-group">
                                <a class="btn sbold green" href="#newAdd" onclick="AddShow()" data-toggle="modal">新增课程</a>
                            </div>
                            <div class="btn-group">
                                <a class="btn sbold green" href="" data-toggle="modal" onclick="CopyCourse()">复制本周课程到下周</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dataTables_wrapper no-footer">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="dataTables_length" id="sample_1_length">
                                <label>
                                    显示条数 <select id="changePageSize" onchange="pageSizeChange()" class="form-control input-sm input-xsmall input-inline">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover order-column dataTable no-footer" role="grid" aria-describedby="sample_1_info">
                            <thead>
                                <tr role="row">
                                    <th tabindex="0" rowspan="1" colspan="1" style="width: 110px;"> 课程名称 </th>
                                    <th tabindex="0" rowspan="1" colspan="1" style="width: 110px;"> 上午/下午 </th>
                                    <th tabindex="0" rowspan="1" colspan="1" style="width:110px;"> 时间 </th>
                                    <th class="td-text-center" tabindex="0" rowspan="1" colspan="1" style="width: 127px;"> 操作设置 </th>
                                </tr>
                            </thead>
                            <tbody id="gridTable"></tbody>
                        </table>
                        <script id="grid" type="text/html">
                            <% for(var i=0;i
                            <list.length;i++){ %>
                                <% var item=list[i]; %>
                                <tr class="gradeX" role="row" id="<%=item.schoolId %>">
                                    <td name="courseName"><%=item.courseName %></td>
                                    <td name="type"><%=item.type %></td>
                                    <td name="startDate"><%=item.startDate.substring(0,10) %></td>
                                    <td class="td-text-center">
                                        <a class="btn btn-sm green" href="#newAdd" onclick="coureSetting('<%= item.id %>')" data-toggle="modal">设置</a>
                                        <a class="btn btn-sm red" href="" onclick="coureDel('<%= item.id %>')" data-toggle="modal">删除</a>
                                    </td>
                                </tr>
                                <%}%>
                        </script>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-sm-5"><div class="dataTables_info" id="data_info">显示 1 到 10 共 0 条</div></div>
                        <div class="col-md-7 col-sm-7">
                            <!--加载分页控件-->
                            @Html.Partial("DataPager")
                        </div>
                    </div>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
</div>
<!-- 弹出层，新增课程-->
<div id="newAdd" class="modal fade" tabindex="-1" data-focus-on="input:first" data-width="600">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 id="editTitle" class="modal-title">新增课程</h4>
    </div>
    <div class="modal-body">
        <div style="margin-left:10px;">
            <div action="#" class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-md-2 control-label">课程名称</label>
                    <div class="col-md-8" >
                        <div class="input-group input-sm col-md-12" style="margin-left:10px;">
                            <input type="text" class="form-control" id="subjectInfo" placeholder="数学#音乐#英语" />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">课程日期</label>
                    <div class="col-md-10">
                        <div class="input-group input-sm date date-picker" style="width:200px;" data-date-format="yyyy-mm-dd" data-date-end-date="">
                            <input type="text" id="startDate" class="form-control" readonly="">
                            <span class="input-group-btn">
                                <button class="btn default" type="button">
                                    <i class="fa fa-calendar"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">上午/下午</label>
                    <div class="col-md-10">
                        <div class="input-group input-sm" style="width:200px;">
                            <select aria-hidden="true" tabindex="-1" id="type" class="form-control select2 select2-hidden-accessible">
                                <option>上午</option>
                                <option>下午</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer" style="height:auto;">
        <button hidden="hidden" id="courseId"></button>
        <button class="btn default" data-dismiss="modal" id="editNameCloseBtn" aria-hidden="true">关闭</button>
        <button class="btn green" data-dismiss="" onclick="Submit()">提交</button>
    </div>

</div>

<script>
    //记录类型查询类型
    var types = "this";
    //页面加载
    $(function () {
        GridData();
    });
    //改变页大小
    function pageSizeChange() {
        var count = $("#changePageSize").val();
        pageSize = count;
        pageIndex = 1;
        GridData();
    }
    //更改查询状态
    function getDatas(data) {
        pageIndex = 1;
        types = data;
        GridData();
    }

    //给选中btn添加颜色
    function getColor(obj) {
        $(".ase").addClass("green").removeClass("red");
        $(obj).removeClass("green").addClass("red");
    }

    var iu = "add";//新增或修改

    //显示新增
    function AddShow(){
        $("#subjectInfo").val("");
        $("#startDate").val("");
    }

    ////设置科目
    //function SetSubject(subjectList) {
    //    AjaxCustom({
    //        url: "/CourseSetting/GetSubject",
    //        type: "post",
    //        showLoading: true,
    //        callBack: function (obj) {
    //            //alert(data);
    //            //加载数据
    //            var DataInfo = template('subject', obj);
    //            $("#subjectInfo").html(DataInfo);
    //            var strs = new Array(); //定义一数组
    //            strs = subjectList.split("#"); //字符分割
    //            for (var i = 0; i < strs.length; i++) {
    //                $("#subjectInfo input[value='" + strs[i] + "']").attr("checked", true);//选中现有科目
    //            }
    //        }
    //    });
    //}

    //显示修改
    function coureSetting(id) {
        iu = "update";//修改
        AjaxCustom({
            url: "/CourseSetting/SelectForId",
            type: "post",
            showLoading: true,
            parames: { id: id },
            callBack: function (obj) {
                $("#editTitle").text("编辑课程"),
                $("#subjectInfo").val(obj.data[0].courseName);
                $("#startDate").val(obj.data[0].startDate.substring(0, 10)),
                $("#type").val(obj.data[0].type),
                $("#courseId").val(obj.data[0].id)
            }
        });
    }

    //删除一条数据
    function coureDel(id) {
        if (confirm("你确定要删除该条数据吗？")) {
            AjaxCustom({
                url: "/CourseSetting/CourseDel",
                type: "post",
                showLoading: true,
                parames: { id: id },
                callBack: function (obj) {
                    if (obj.code == "1") {
                        AlertMsg("删除成功");
                        pageIndex = 1;
                        GridData();
                    }
                    else {
                        AlertMsg("删除失败");
                    }

                }
            });
        }
    }

    //提交
    function Submit() {
        var subjectstr = $("#subjectInfo").val();//获取选中科目
        //$("input:checked:checked").each(function (i) {
        //    subjectstr += this.value + "#";
        //});
        //if (subjectstr.charAt(subjectstr.length - 1) == "#")
        //    subjectstr = subjectstr.substring(0, subjectstr.length - 1)

        if (subjectstr == "" || $("#startDate").val() == "") {
            AlertMsg("请将信息填写完整!");
            return;
        }
        var data = {
            type: iu,
            courseName: subjectstr,
            startDate: $("#startDate").val(),
            sType: $("#type option:selected").val(),
            schoolId: $("#schoolId").val(),
            id: $("#courseId").val()
        };
        AjaxCustom({
            url: "/CourseSetting/InsertOrUpdate",
            type: "post",
            showLoading: true,
            parames: data,
            callBack: function (obj) {
                if (obj.code == 1) {
                    $("#editNameCloseBtn").click();//隐藏弹出层
                    AlertMsg("操作成功");
                    pageIndex = 1;
                    GridData();
                } else if (obj.code == 3) {
                    AlertMsg("已存在类似数据，请勿重复操作");
                }
                else {
                    AlertMsg("操作失败");
                }
            }
        });
        iu = "add";//还原到默认新增状态
    }
    //复制课程
    function CopyCourse() {
        AjaxCustom({
            url: "/CourseSetting/CopyCourseInfo",
            type: "post",
            showLoading: true,
            callBack: function (obj) {
                if (parseInt(obj.code) > 0) {
                    AlertMsg("复制成功");
                    $("#nexts").click();
                } else {
                    AlertMsg("复制失败");
                }

            }
        });
    }

    //新增课程
    //function AddOrUpdate() {
    //    AjaxCustom({
    //        url: "/CourseSetting/GetSubject",
    //        type: "post",
    //        showLoading: true,
    //        callBack: function (obj) {
    //            //alert(data);
    //            //加载数据
    //            var DataInfo = template('subject', obj);
    //            $("#subjectInfo").html(DataInfo);
    //        }
    //    });
    //}

    function GridData() {
        $("#gridTable").html("");
        AjaxCustom({
            url: "/CourseSetting/GetCourseList",
            type: "post",
            showLoading: true,//是否显示遮罩层
            parames: { youeryuanName: '', pageIndex: pageIndex, pageSize: pageSize, date: types },
            callBack: function (obj) {
                var start = (obj.data.pageIndex - 1) * pageSize + 1;
                var end = obj.data.pageIndex * pageSize;
                $("#TotalCount").html(obj.data.total);//总行数
                if (obj.data.total == 0) {
                    $("#data_info").html("");
                    $("#gridTable").html("<tr><td colspan=\"6\" style='text-align:center;'><b style='color:red;'>暂无数据</b></td></tr>");
                    document.getElementById('paging1').innerHTML = "";//分页控件代码为空
                } else {
                    if (pageIndex == obj.data.pageCount) {
                        $("#data_info").html("显示 " + start + " 到 " + obj.data.total + " 共 " + obj.data.total + " 条");
                    } else {
                        $("#data_info").html("显示 " + start + " 到 " + end + " 共 " + obj.data.total + " 条");
                    }
                    //加载数据
                    var gridData = template('grid', obj.data);
                    $("#gridTable").html(gridData);
                    //加载分页控件
                    loadPager(obj.data.pageIndex, obj.data.pageCount);
                }
            }
        });
    }
</script>
